//获取cookie中的name1键
var name1 = getCookie('name1');
//获取locaStrong中的cartList数据
var cartList = localStorage.getItem('cartList')

//获取地址栏中的地址
var url = location.href
    //获取大盒子对象
var div1 = document.querySelector("#div1")
    // console.log(cartList);
    //判断当前进入购物车时，是否已经登录了
if (name1) {
    //把字符串转为数组对象
    cartList = eval('(' + cartList + ')')
    var arr = cartList.filter(v => v.username === name1)
        //判断当前cartList中是否有数据
    if (arr.length > 0) {
        show1()
    } else {
        var str = `
        <div class="jumbotron">
            <h1>您的购物车空空如也</h1>
            <p>点击下方按钮快去选购吧! ^_^</p>
            <p><a class="btn btn-primary btn-lg" href="./list.html" role="button">赶紧去选吧</a></p>
        </div>
        `
            //把字符串渲染到页面中
        div1.innerHTML = str
    }
} else {
    alert("非法进入")
    location.href = "./login.html?pathurl=" + url
}

function show1() {
    var str = ` 
    <div id="productList">
    <div id="title">
<div>
    <h3>全部商品</h3>
</div>
<div>
    <span>配送至:</span>
    <select id="city">
    <option value="bj">北京</option>
</select>
    <select id="area">
    <option value="hd">海淀区</option>
</select>
</div>
</div>
<table id="goods" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
    <!-- 全选按钮 -->
    <th><input type="checkbox" class="checkAll"></th>
    <th>全选</th>
    <th>商品</th>
    <th></th>
    <th>单价</th>
    <th>数量</th>
    <th>小计</th>
    <th>操作</th>
</tr>
</thead>
<tbody>
`
    arr.forEach(item => {
        str += ` <tr class="fenGe">
        <td colspan="8">
            <hr/>
        </td>
    </tr>

    <tr id="fullReduction1">
        <td><img src="./img/buy/满减.png"></td>
        <td colspan="7">
            <span>活动商品购满两件，即可享受满减&nbsp;&gt;</span>
            <span>&nbsp;&nbsp;<a href="list.html">去凑单</a>&nbsp;&gt;</span>
        </td>
    </tr>
  
    <tr class="good1">
        <!-- 复选框 -->
        <td><input type="checkbox" name="check" class="jcheck"></td>
        <td><img src="${item.goods_small_logo}"></td>
        <td>
            <img src="./img/buy/shop.png">
            <span>&nbsp;${item.goods_name}</span>
        </td>
        <td>
            <span>${item.cat_id}/${item.cat_two_id}</span>
        </td>
        <td class="ll">
            ￥<span class="price">${item.goods_price}</span>
            <img src="./img/buy/促销.png">
        </td>
        <td>
            <div class="minus">-</div>
            <input type="text" class="itxt" value="1">
            <div class="add">+</div>
            <div class="hasGood">请输入数字</div>
        </td>
        <td>
            ￥<span class="subtotal">${item.goods_price}</span>
        </td>
        <td>
            <div class="delete" data_id="${item.goods_id}">删除</div>
            <div class="remove">移到我的关注</div>
        </td>
    </tr>`
    })
    str += `
    </tbody>
    </table>
    </div>
    <div id="settlement">
    <div class="footer1">
        <span>移到我的关注&nbsp;&nbsp;&nbsp;&nbsp;清理购物车</span>
        <span>&nbsp;&nbsp;已选择&nbsp;<span id="totalNum">0</span>&nbsp;件商品&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <!-- 计算总价 -->
        <span><img src="./img/buy/灯泡_03.png"></span>
        <!-- 计算总价 -->
        <span>总价:￥<span id="totalPrice">0.00</span></span>

    </div>
    <div class="submit" id="submit">
        去结算
    </div>
</div>
    `
        //把拼接好的内容，渲染到大盒子中
    div1.innerHTML = str
}

$(function() {
    // 1.点击全选 小复选框全被选中
    $('.checkAll').change(function() {
        var $check = $(this).prop("checked");
        $('.jcheck').prop("checked", $check); // 设置小复选框状态同全选
        total()
    });

    // ：checked 选择器 查找被选中的表单元素
    $('.jcheck').change(function() {
        // 选中复选框总个数 等于 复选框长度时 全选按钮被选中
        if ($('.jcheck:checked').length === $('.jcheck').length) {
            $('.checkAll').prop("checked", true)
        } else {
            $('.checkAll').prop("checked", false)
        }
        total()
    })

    // 2.点+ - 对商品的数量进行加减 
    // 重：*改变的是本商品的数量 通过兄弟节点找到本商品 *变量初始值为文本框的值
    // 点击加号
    $('.add').click(function() {
            var n = $(this).siblings(".itxt").val();
            // console.log($n);
            n++;
            $(this).siblings(".itxt").val(n);

            // 3.计算小计 重点找到当前对应的
            var price = $(this).parent().siblings(".ll").children('.price').html();
            var pr = $(this).parent().siblings().children('.subtotal');
            // 设置小计的内容保留两位小数
            pr.text((price * n).toFixed(2))
            total() //每次加减后计算总价
        })
        // 点击减号
    $('.minus').click(function() {
        var n = $(this).siblings(".itxt").val();
        // 判断如果n=1时 就不在-- return即不再执行后面的代码
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 获取价格
        var price = $(this).parent().siblings(".ll").children('.price').html();
        var pr = $(this).parent().siblings().children('.subtotal');
        pr.text((price * n).toFixed(2))
        total()
    })

    // 6.文本框输入 小计变换 且值为数字
    $('.itxt').on('input', function() {
        var $xn = $(this).val();
        var reg = /^\d{1,}$/;
        if (reg.test($xn)) { //正则判断如果输入的是数字 则改变小计
            $(this).next().next().css("display", "none");
            // 找到 数量 单价 小计元素
            $('.itxt').change(function() {
                var n = $(this).val();
                var price = $(this).parent().siblings(".ll").children('.price').html();
                var pr = $(this).parent().siblings().children('.subtotal');
                pr.text((price * n).toFixed(2))
                total()
            })
        } else {
            // 显示请输入数字
            $(this).next().next().css("display", "block")
        }
    })

    // 4.点击删除当行
    $('.delete').click(function() {
        var data_id = $(this).attr('data_id')
        cartList = cartList.filter(item => {
                //把不等于当前id的商品返回给cartList 过滤功能
                return item.goods_id != data_id
            })
            //重新存储 重新渲染
        localStorage.setItem("cartList", JSON.stringify(cartList))
        show1()
            // 重新载入当前文档
        location.reload()
        total();

    })

    // 5.计算总价函数
    function total() {
        // 获取所有商品
        var $trs = $('.good1')
        var sum = 0 //总计钱数
        var count = 0;
        // 遍历每个商品
        $trs.each(function() {
            //获取当前tr中的所有的td
            var $tds = $(this).children()

            //获取当前商品的小计
            var xiaoji = $tds[$tds.length - 2].lastElementChild.innerHTML
                // 获取当前商品的件数
            var goodsum = $($tds[$tds.length - 3]).children('.itxt').val()

            // 当前复选框选中 再计算价格
            if ($(this).children().children().prop('checked')) {
                sum += parseFloat(xiaoji)
                count += parseFloat(goodsum)
            }
            //获取来的为字符串 所以要转为数值型计算
        })
        $('#totalPrice').html(sum.toFixed(2));
        $('#totalNum').html(count)
    }
    total()
})